<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AUTO REPAIR</title>
    <!-- 引入窗口图标 -->
    <link rel="shortcut icon" href="img/icon/bitbug_favicon.ico">
    <!-- 引入基础公共样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入头部样式 -->
    <link rel="stylesheet" href="css/head.css">
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入阿里图标 -->
    <link rel="stylesheet" href="css/font/font_2053772_2bd8n8qierk/iconfont.css">
    <!-- 引入底部样式 -->
    <link rel="stylesheet" href="css/footer.css">
</head>

<body>
    <header id="head">
        <div class="red">
            <div id="center">
                <div class="logo">
                    <div class="l_left">
                        <img src="./img/logo/logo.png" alt="">
                    </div>
                </div>
            </div>

        </div>
        <div class="gray">
            <div id="center">
                <div class="l_right">
                    <div class="_right_in">
                        <div class="phone">
                            <span class="iconfont icon-dianhua01"></span>
                            <div class="font">
                                <p>Call for book:</p>
                                <p>(770) 123 4567</p>
                            </div>
                        </div>
                        <div class="social">
                            <a href="https://www.facebook.com/" target="_blank">
                                <span class="iconfont icon-facebook"></span>
                            </a>
                            <a href="https://www.twitter.com" target="_blank">
                                <span class="iconfont icon-twitter"></span>
                            </a>
                            <a href="https://wwd.com/tag/instagram/" target="_blank">
                                <span class="iconfont icon-instagram"></span>
                            </a>
                            <a href="https://wwww.youtube.com" target="_blank">
                                <span class="iconfont icon-youtube"></span>
                            </a>

                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 导航栏 -->
        <div id="container">
            <nav class="nav">
                <ul class="nav_list">
                    <li>
                        <a href="#">
                            HOME
                        </a>
                    </li>
                    <li>
                        <a href="pages/about_us.html">
                            ABOUT
                        </a>
                    </li>
                    <li>
                        <a href="pages/services.html">
                            SERVICE▾
                        </a>
                        <div class="service_down">
                            <a href="javascript:;">
                                Tyre Service
                            </a>
                            <a href="javascript:;">
                                Engine Service
                            </a>
                            <a href="javascript:;">
                                Lube,Oli...
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;">
                            GALLERY
                        </a>
                    </li>
                    <li>
                        <a href="pages/team.html">
                            TEAM
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            TESTIMONIALS
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            BLOG▾
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            CONTACT US
                        </a>
                    </li>
                </ul>
                <div class="last_li">
                    <a href="javascript:;">
                        SET AN APPOINTMENT
                    </a>
                </div>
            </nav>
        </div>
    </header>

    <!-- Best_Auto -->
    <section class="best_auto">
        <div id="center">
            <div class="words">
                <p>BEST AUTO MAINTENANCE</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nibh ipsum,cursus sit amet magna id, consectetur lobortis nisi. Nulla ac libero lacus.Aenean eu fringilla eros, non hendrerit tellus.</p>
            </div>
            <div class="bottom_img">
                <div class="wpw">
                    <p>We Provide World Best Digital Service
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Etiam nibh ipsum,cursus sit amet magna id, consectetur lobortis nisi.
                    </p>
                </div>
                <div class="view_details">
                    <a href="javascrip:;">
                        VIEW DETAILS
                    </a>
                </div>
            </div>
        </div>
    </section>


    <!-- Professional Car Repairs -->
    <section class="p_carRepairs">
        <div class="red_car">
            <img src="./img/car/car.png" alt="">
        </div>
        <div class="pcr_words">
            <div class="pcr_font">
                <p>Professional Car Repairs</p>
                <p>and Maintenance</p>
            </div>
            <p class="random_words">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nibh dolor, gravidafaucibus dolor consectetur, pulvinar rhoncus risus.Fusce vel rutrum mi. Suspendissepretium tellus eu ipsum pellentesque convallis. Ut mollis libero eu massa imperdietfaucibus
                vitae non diam. Sed egestas felis libero, ut suscipit nisl varius non.Proin egetsuscipit nulla.Nulla facilisi. In hac habitasse platea dictumst.
            </p>
            <div class="pho">
                <div class="one">
                    <p>310</p>
                    <p>Project Done</p>
                </div>
                <div class="two">
                    <p>769</p>
                    <p>Happy Client</p>
                </div>
                <div class="three">
                    <p>438</p>
                    <p>Our Employees</p>
                </div>
            </div>
            <div class="read_more">
                <a href="javascript:;">
                    READ MORE
                </a>
            </div>
        </div>
    </section>

    <!-- Repair Car Img -->
    <section id="center">
        <div class="tel">
            <div class="TSMOS">
                <img src="./img/car/tyre_service.png" alt="">
                <p>Tyre Service and Many Other</p>
                <p>Services</p>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nibh ipsum, cursus sit amet magna.</span>
            </div>
            <div class="ES">
                <img src="./img/car/engine_service.png" alt="">
                <p>Engine Service</p>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin ultricies tellus id mi pellentesque, nec
                    sollicitudin dolor tempus.
                    </span>
            </div>
            <div class="LOFO">
                <img src="./img/car/oil_service.jpg" alt="">
                <p>Lube, Oil, Filters and Other</p>
                <p>Service</p>
                <span>Lorem ipsum dolor sit amet, consectetur elit.</span>
            </div>
        </div>
    </section>

    <!-- Quality Work is Our First Priority -->
    <section class="QWIOFP">
        <section id="content">
            <div class="qwo_words">
                <p>Quality Work is Our</p>
                <p>First Priority</p>
            </div>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nibh dolor,gravida faucibus dolor consectetur, pulvinar rhoncus risus. Fusce vel rutrummi. Suspendisse pretium tellus eu ipsum pellentesque convallis. Ut mollislibero eu massa imperdiet faucibus vitae non diam.</span>
            <a href="javascrip:;">BOOK SERVICE NOW</a>
            <div class="video">
                <div href="javascript:;">
                    <span class="iconfont icon-play1"></span>
                </div>
            </div>
        </section>
    </section>

    <!-- Emergency Service -->
    <section class="e_service">
        <section id="content">
            <img src="./img/car/emergencyImg.png" alt="">
            <div class="e_words">
                <div class="e_font">
                    <p>Emergency <span>Service</span></p>
                    <span>24/7</span>
                </div>
                <p>Donec scelerisque dolor id nunc dictum, interdum gravida mauris rhoncus.Aliquam at ultrices nunc.</p>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.vivamus nibh dolor,gravida faucibusdolor consectetur, pulvinar rhoncus risus. Fusce vel rutrum mi. Suspendisse pretium tellus euipsum pellentesque convallis. Ut mollis libero
                        eu massa imperdiet faucibus vitae non diam.Sed egestas felis libero, ut suscipit nisl varius non.Proin eget suscipit nulla.</p>
                    <p>Fusce vel rutrum mi. Suspendisse pretium tellus eu ipsum pellentesque convallis. Ut mollislibero eu massa imperdiet faucibus vitae non diam. Sed egestas felis libero, ut suscipit nislvarius non. Proin eget suscipit nulla.Nulla facilisi.In
                        hac habitasse platea.Lorem ipsum dolorsit amet, consectetur adipiscing elit. Vivamus nibh dolor, gravida faucibus dolor consectetur,pulvinar rhoncus risus.</p>
                </div>
                <div class="e_num">
                    <span>Call for book:</span>
                    <img src="./img/iconfont/phoneicon.png" alt="">
                    <span>(770) 123 4567</span>
                </div>
            </div>
        </section>
    </section>

    <!-- Why Choose Us -->
    <section class="why_cu">
        <div class="wcu_words">
            <div class="wcu_font">
                <p>Why Choose Us ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div>
                Donec pretium sem elit, a imperdiet mauris semper ut.Nullam auctor aliquet varius. Donec a ullamcorperurna. Praesent elementum urna mi, vitae laoreet odio molestie in. Ut a ex nunc. Quisque aliquet, nisl tincidunt scelerisque maximus, purus est molestie
                erat sit amet fermentum ex libero in justo. Lorem ipsumdolor sit amet, consectetur adipiscing elit. Proin molestie, quam quis suscipit varius, tellus turpis mollisarcu, nec rhoncus sapien dui et elit. Nullam placerat ipsum sit amet tellus
                malesuada sagittis. Vivamus utante congue est iaculis maximus at non dui.
            </div>
            <div>
                <p><i class="iconfont icon-you"></i>Sed egestas urna eget ipsum condimentum
                </p>
                <p><i class="iconfont icon-you"></i>Maecenas lacinia blandit ligula, at tristique mi sagittis sit
                </p>
                <p><i class="iconfont icon-you"></i>Vivamus dapibus massa non orci tincidunt
                </p>
            </div>
            <div>
                <span>READ MORE</span>
            </div>
        </div>
    </section>

    <!-- Door Step Service -->
    <section class="door_ss">
        <div class="dss">
            <div class="dss_font">
                <p>Door Step <span>Service</span></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div>
                Donec pretium sem elit, a imperdiet mauris semper ut.Nullam auctor aliquet varius. Donec a ullamcorperurna. Praesent elementum urna mi, vitae laoreet odio molestie in. Ut a ex nunc. Quisque aliquet, nisl tincidunt scelerisque maximus, purus est molestie
                erat sit amet fermentum ex libero in justo. Lorem ipsumdolor sit amet, consectetur adipiscing elit. Proin molestie, quam quis suscipit varius, tellus turpis mollisarcu, nec rhoncus sapien dui et elit. Nullam placerat ipsum sit amet tellus
                malesuada sagittis. Vivamus utante congue est iaculis maximus at non dui.
            </div>
            <div>
                <div>
                    <div>
                        <img src="./img/iconfont/tyre.png" alt="">
                    </div>
                    <p>Wheels Works</p>
                </div>
                <div>
                    <div>
                        <img src="./img/iconfont/engine.png" alt="">
                    </div>
                    <p>Engine Works</p>
                </div>
                <div>
                    <div>
                        <img src="./img/iconfont/pipe.png" alt="">
                    </div>
                    <p>Water Service</p>
                </div>
            </div>
        </div>
        <div class="dss_img"></div>
    </section>

    <!-- Our Reviews -->
    <section class="our_reviews">
        <h1>Our Reviews</h1>
        <div class="white_line"></div>
        <div class="or_words">
            <div class="or_font">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, urna eu scelerisque maximus, urna nibh semper lectus,ut interdum nunc ligula et magna.In ac mauris vehicula, vulputate sem at, placerat nisl.Etiam laoreet erat magna,
                    athendrerit lorem vulputate non. Nam facilisis congue convallis.</p>
            </div>
            <div class="or_font">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, urna eu scelerisque maximus, urna nibh semper lectus,ut interdum nunc ligula et magna.In ac mauris vehicula, vulputate sem at, placerat nisl.Etiam laoreet erat magna,
                    athendrerit lorem vulputate non. Nam facilisis congue convallis.</p>
            </div>
        </div>
        <div class="wanda_bates">
            <div>
                <div class="wanda_img"></div>
                <span>Wanda Bates</span>
            </div>
            <div>
                <div class="wanda_img"></div>
                <span>Wanda Bates</span>
            </div>
        </div>
        <div class="or_circle">
            <span></span>
            <span></span>
        </div>
    </section>

    <!-- Our Team -->
    <section class="our_team">
        <div id="center">
            <h1>Our <span>Team</span></h1>
            <div class="white_line"></div>
            <div class="team_employees">
                <div class="one">
                    <span>Hugo James</span>
                </div>
                <div class="two">
                    <span>Hugo James</span>
                </div>
                <div class="three">
                    <span>Hugo James</span>
                </div>
                <div class="four">
                    <span>Hugo James</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部 -->
    <footer>
        <section class="set_appoinment">
            <div id="center">
                <div class="saat">
                    <div class="saat_font">
                        <p>Set An <span style="color:#ee3131;">Appointment</span>
                        </p>
                        <p>Today</p>
                    </div>
                    <div class="saat_callAndPoint">
                        <div class="cfb">
                            <img src="img/iconfont/phoneicon.png" alt="">
                            <div class="cfb_num">
                                <p>Call for book:</p>
                                <p>(770) 123 4567</p>
                            </div>
                        </div>
                        <div class="crp">
                            <img src="img/iconfont/map_icon.png" alt="">
                            <div class="crp_concrete">
                                <p>Car Repairing Point:</p>
                                <p>123 Lorem lpsum 12 sit,
                                </p>
                                <p>dollor Atlant, GA 1234</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="contact_us">
                    <div class="cs_content">
                        <h2>Contact Us</h2>
                        <p></p>

                        <form action="" name="msg">
                            <input type="text" placeholder="Name">
                            <input type="email" placeholder="Email">
                            <input type="text" placeholder="Phone">
                            <div class="time">
                                <input type="date">
                                <input type="time">
                            </div>
                            <div href="javascript:;">
                                <a href="javascript:;">
                                    CONTACT US
                                </a>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </section>

        <!-- 底部-下半部 -->
        <section class="follow_us">
            <div class="fu_content">
                <div class="footer_logo">
                    <img src="img/logo/logo.png" alt="">
                    <ul class="foot_list">
                        <li>
                            <a href="javascript:;">
                                HOME
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                ABOUT
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                SERVICE
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                GALLERY
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                TEAM
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                TESTIMONIALS
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                BLOG
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                CONTACT US
                            </a>
                        </li>
                    </ul>
                    <div class="fuo">
                        <h3>FOLLOW US ON</h3>
                        <div>
                            <a href="https://www.facebook.com/" target="_blank">
                                <span class="iconfont icon-facebookfacebook52"></span>
                            </a>
                            <a href="https://www.twitter.com" target="_blank">
                                <span class="iconfont icon-tuite"></span>
                            </a>
                            <a href="https://wwd.com/tag/instagram/" target="_blank">
                                <span class="iconfont icon-instagram1"></span>
                            </a>
                            <a href="https://wwww.youtube.com" target="_blank">
                                <span class="iconfont icon-youtube-fill-round"></span>
                            </a>
                        </div>
                    </div>
                    <p>
                        Copyright © 2020.Auto Repair All Rights Reserved.

                    </p>
                </div>
            </div>
        </section>
        <a href="#head">
            <img src="img/iconfont/car_upper.png" alt="">
        </a>
    </footer>

</body>

</html>